JavaScript Async Generator Helpers: Opanowanie tworzenia i zarządzania strumieniami

Programowanie asynchroniczne w JavaScript znacznie ewoluowało na przestrzeni lat. Wraz z wprowadzeniem generatorów asynchronicznych i iteratorów asynchronicznych, programiści zyskali potężne narzędzia do obsługi strumieni danych asynchronicznych. Teraz, pomocnicy generatorów asynchronicznych w JavaScript (Async Generator Helpers) dodatkowo wzmacniają te możliwości, zapewniając bardziej usprawniony i wyrazisty sposób tworzenia, transformacji i zarządzania strumieniami danych asynchronicznych. Ten przewodnik omawia podstawy Async Generator Helpers, zagłębia się w ich funkcjonalności i demonstruje ich praktyczne zastosowania na przejrzystych przykładach.

Zrozumienie generatorów i iteratorów asynchronicznych

Przed zagłębieniem się w Async Generator Helpers, kluczowe jest zrozumienie podstawowych koncepcji generatorów asynchronicznych i iteratorów asynchronicznych.

Generatory asynchroniczne

Generator asynchroniczny to funkcja, która może być wstrzymywana i wznawiana, zwracając wartości asynchronicznie. Pozwala na generowanie sekwencji wartości w czasie, bez blokowania głównego wątku. Generatory asynchroniczne są definiowane przy użyciu składni async function*.

Przykład:

async function* generateSequence(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 500)); // Simulate asynchronous operation
    yield i;
  }
}

// Usage
const sequence = generateSequence(1, 5);

Iteratory asynchroniczne

Iterator asynchroniczny to obiekt, który dostarcza metodę next(), zwracającą obietnicę (promise), która rozwiązuje się do obiektu zawierającego następną wartość w sekwencji oraz właściwość done wskazującą, czy sekwencja została wyczerpana. Iteratory asynchroniczne są konsumowane za pomocą pętli for await...of.

Przykład:

async function* generateSequence(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 500));
    yield i;
  }
}

async function consumeSequence() {
  const sequence = generateSequence(1, 5);
  for await (const value of sequence) {
    console.log(value);
  }
}

consumeSequence();

Wprowadzenie do Async Generator Helpers

Async Generator Helpers to zestaw metod, które rozszerzają funkcjonalność prototypów generatorów asynchronicznych. Zapewniają wygodne sposoby manipulowania asynchronicznymi strumieniami danych, czyniąc kod bardziej czytelnym i łatwiejszym w utrzymaniu. Te pomocniki działają leniwie (lazily), co oznacza, że przetwarzają dane tylko wtedy, gdy są potrzebne, co może poprawić wydajność.

Następujące pomocniki generatorów asynchronicznych są powszechnie dostępne (w zależności od środowiska JavaScript i polyfilli):

• map
• filter
• take
• drop
• flatMap
• reduce
• toArray
• forEach

Szczegółowe omówienie Async Generator Helpers

1. `map()`

Pomocnik map() transformuje każdą wartość w sekwencji asynchronicznej, stosując podaną funkcję. Zwraca nowy generator asynchroniczny, który dostarcza przekształcone wartości.

Składnia:

asyncGenerator.map(callback)

Przykład: Konwersja strumienia liczb na ich kwadraty.

async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  const squares = numbers.map(async (num) => {
    await new Promise(resolve => setTimeout(resolve, 100)); // Simulate async operation
    return num * num;
  });

  for await (const square of squares) {
    console.log(square);
  }
}

processNumbers();

Rzeczywisty przypadek użycia: Wyobraź sobie pobieranie danych użytkowników z wielu API i konieczność przekształcenia tych danych do spójnego formatu. map() może być użyte do asynchronicznego zastosowania funkcji transformującej do każdego obiektu użytkownika.

async function* fetchUsersFromMultipleAPIs(apiEndpoints) {
  for (const endpoint of apiEndpoints) {
    const response = await fetch(endpoint);
    const data = await response.json();
    for (const user of data) {
      yield user;
    }
  }
}

async function processUsers() {
  const apiEndpoints = [
    'https://api.example.com/users1',
    'https://api.example.com/users2'
  ];

  const users = fetchUsersFromMultipleAPIs(apiEndpoints);

  const normalizedUsers = users.map(async (user) => {
    // Normalize user data format
    return {
      id: user.userId || user.id,
      name: user.fullName || user.name,
      email: user.emailAddress || user.email
    };
  });

  for await (const normalizedUser of normalizedUsers) {
    console.log(normalizedUser);
  }
}

2. `filter()`

Pomocnik filter() tworzy nowy generator asynchroniczny, który dostarcza tylko te wartości z oryginalnej sekwencji, które spełniają podany warunek. Pozwala na selektywne włączanie wartości do wynikowego strumienia.

Składnia:

asyncGenerator.filter(callback)

Przykład: Filtrowanie strumienia liczb, aby uwzględnić tylko liczby parzyste.

async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 10);
  const evenNumbers = numbers.filter(async (num) => {
    await new Promise(resolve => setTimeout(resolve, 100));
    return num % 2 === 0;
  });

  for await (const evenNumber of evenNumbers) {
    console.log(evenNumber);
  }
}

processNumbers();

Rzeczywisty przypadek użycia: Przetwarzanie strumienia wpisów dziennika (logów) i odfiltrowywanie wpisów na podstawie ich poziomu ważności. Na przykład, przetwarzanie tylko błędów i ostrzeżeń.

async function* readLogFile(filePath) {
  // Simulate reading a log file line by line asynchronously
  const logEntries = [
    { timestamp: '...', level: 'INFO', message: '...' },
    { timestamp: '...', level: 'ERROR', message: '...' },
    { timestamp: '...', level: 'WARNING', message: '...' },
    { timestamp: '...', level: 'INFO', message: '...' },
    { timestamp: '...', level: 'ERROR', message: '...' }
  ];

  for (const entry of logEntries) {
    await new Promise(resolve => setTimeout(resolve, 50));
    yield entry;
  }
}

async function processLogs() {
  const logEntries = readLogFile('path/to/log/file.log');
  const errorAndWarningLogs = logEntries.filter(async (entry) => {
    return entry.level === 'ERROR' || entry.level === 'WARNING';
  });

  for await (const log of errorAndWarningLogs) {
    console.log(log);
  }
}

3. `take()`

Pomocnik take() tworzy nowy generator asynchroniczny, który dostarcza tylko pierwszych n wartości z oryginalnej sekwencji. Jest to przydatne do ograniczania liczby przetwarzanych elementów z potencjalnie nieskończonego lub bardzo dużego strumienia.

Składnia:

asyncGenerator.take(n)

Przykład: Pobieranie pierwszych 3 liczb ze strumienia liczb.

async function* generateNumbers(start) {
  let i = start;
  while (true) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i++;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1);
  const firstThree = numbers.take(3);

  for await (const num of firstThree) {
    console.log(num);
  }
}

processNumbers();

Rzeczywisty przypadek użycia: Wyświetlanie 5 najlepszych wyników wyszukiwania z asynchronicznego API wyszukiwania.

async function* search(query) {
  // Simulate fetching search results from an API
  const results = [
    { title: 'Result 1', url: '...' },
    { title: 'Result 2', url: '...' },
    { title: 'Result 3', url: '...' },
    { title: 'Result 4', url: '...' },
    { title: 'Result 5', url: '...' },
    { title: 'Result 6', url: '...' }
  ];

  for (const result of results) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield result;
  }
}

async function displayTopSearchResults(query) {
  const searchResults = search(query);
  const top5Results = searchResults.take(5);

  for await (const result of top5Results) {
    console.log(result);
  }
}

4. `drop()`

Pomocnik drop() tworzy nowy generator asynchroniczny, który pomija pierwsze n wartości z oryginalnej sekwencji i dostarcza pozostałe wartości. Jest to przeciwieństwo take() i jest przydatne do ignorowania początkowych części strumienia.

Składnia:

asyncGenerator.drop(n)

Przykład: Pomijanie pierwszych 2 liczb ze strumienia liczb.

async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  const remainingNumbers = numbers.drop(2);

  for await (const num of remainingNumbers) {
    console.log(num);
  }
}

processNumbers();

Rzeczywisty przypadek użycia: Paginacja dużego zbioru danych pobranego z API, z pominięciem już wyświetlonych wyników.

async function* fetchData(url, pageSize, pageNumber) {
  const offset = (pageNumber - 1) * pageSize;
  // Simulate fetching data with offset
  const data = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
    { id: 4, name: 'Item 4' },
    { id: 5, name: 'Item 5' },
    { id: 6, name: 'Item 6' },
    { id: 7, name: 'Item 7' },
    { id: 8, name: 'Item 8' }
  ];

  const pageData = data.slice(offset, offset + pageSize);

  for (const item of pageData) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield item;
  }
}

async function displayPage(pageNumber) {
  const pageSize = 3;
  const allData = fetchData('api/data', pageSize, pageNumber);
  const page = allData.drop((pageNumber - 1) * pageSize);  // skip items from previous pages

  const results = page.take(pageSize);


  for await (const item of results) {
    console.log(item);
  }
}

// Example usage
displayPage(2);

5. `flatMap()`

Pomocnik flatMap() transformuje każdą wartość w sekwencji asynchronicznej, stosując funkcję, która zwraca iterowalny obiekt asynchroniczny (Async Iterable). Następnie spłaszcza wynikowy obiekt w pojedynczy generator asynchroniczny. Jest to przydatne do przekształcania każdej wartości w strumień wartości, a następnie łączenia tych strumieni.

Składnia:

asyncGenerator.flatMap(callback)

Przykład: Przekształcanie strumienia zdań w strumień słów.

async function* generateSentences() {
  const sentences = [
    'This is the first sentence.',
    'This is the second sentence.',
    'This is the third sentence.'
  ];

  for (const sentence of sentences) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield sentence;
  }
}

async function* stringToWords(sentence) {
    const words = sentence.split(' ');
    for (const word of words) {
        await new Promise(resolve => setTimeout(resolve, 50));
        yield word;
    }
}

async function processSentences() {
  const sentences = generateSentences();
  const words = sentences.flatMap(async (sentence) => {
      return stringToWords(sentence);
  });

  for await (const word of words) {
    console.log(word);
  }
}

processSentences();

Rzeczywisty przypadek użycia: Pobieranie komentarzy do wielu wpisów na blogu i łączenie ich w jeden strumień w celu przetworzenia.

async function* fetchBlogPostIds() {
  const blogPostIds = [1, 2, 3]; // Simulate fetching blog post IDs from an API
  for (const id of blogPostIds) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield id;
  }
}

async function* fetchCommentsForPost(postId) {
  // Simulate fetching comments for a blog post from an API
  const comments = [
    { postId: postId, text: `Comment 1 for post ${postId}` },
    { postId: postId, text: `Comment 2 for post ${postId}` }
  ];
  for (const comment of comments) {
    await new Promise(resolve => setTimeout(resolve, 50));
    yield comment;
  }
}

async function processComments() {
  const postIds = fetchBlogPostIds();
  const allComments = postIds.flatMap(async (postId) => {
    return fetchCommentsForPost(postId);
  });

  for await (const comment of allComments) {
    console.log(comment);
  }
}

6. `reduce()`

Pomocnik reduce() stosuje funkcję do akumulatora i każdej wartości z generatora asynchronicznego (od lewej do prawej), aby zredukować go do pojedynczej wartości. Jest to przydatne do agregowania danych z asynchronicznego strumienia.

Składnia:

asyncGenerator.reduce(callback, initialValue)

Przykład: Obliczanie sumy liczb w strumieniu.

async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  const sum = await numbers.reduce(async (accumulator, num) => {
    await new Promise(resolve => setTimeout(resolve, 100));
    return accumulator + num;
  }, 0);

  console.log('Sum:', sum);
}

processNumbers();

Rzeczywisty przypadek użycia: Obliczanie średniego czasu odpowiedzi serii wywołań API.

async function* fetchResponseTimes(apiEndpoints) {
  for (const endpoint of apiEndpoints) {
    const startTime = Date.now();
    try {
      await fetch(endpoint);
      const endTime = Date.now();
      const responseTime = endTime - startTime;
      await new Promise(resolve => setTimeout(resolve, 50));
      yield responseTime;
    } catch (error) {
      console.error(`Error fetching ${endpoint}: ${error}`);
      yield 0; // Or handle the error appropriately
    }
  }
}

async function calculateAverageResponseTime() {
  const apiEndpoints = [
    'https://api.example.com/endpoint1',
    'https://api.example.com/endpoint2',
    'https://api.example.com/endpoint3'
  ];
  const responseTimes = fetchResponseTimes(apiEndpoints);

  let count = 0;
  const sum = await responseTimes.reduce(async (accumulator, time) => {
    count++;
    return accumulator + time;
  }, 0);

  const average = count > 0 ? sum / count : 0;
  console.log(`Average response time: ${average} ms`);
}

7. `toArray()`

Pomocnik toArray() konsumuje generator asynchroniczny i zwraca obietnicę, która rozwiązuje się do tablicy zawierającej wszystkie wartości dostarczone przez generator. Jest to przydatne, gdy trzeba zebrać wszystkie wartości ze strumienia do jednej tablicy w celu dalszego przetwarzania.

Składnia:

asyncGenerator.toArray()

Przykład: Zbieranie liczb ze strumienia do tablicy.

async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  const numberArray = await numbers.toArray();

  console.log('Number Array:', numberArray);
}

processNumbers();

Rzeczywisty przypadek użycia: Zbieranie wszystkich elementów z paginowanego API do jednej tablicy w celu filtrowania lub sortowania po stronie klienta.

async function* fetchAllItems(apiEndpoint) {
    let pageNumber = 1;
    const pageSize = 100;  // Adjust based on the API's pagination limits

    while (true) {
        const url = `${apiEndpoint}?page=${pageNumber}&pageSize=${pageSize}`;
        const response = await fetch(url);
        const data = await response.json();

        if (!data || data.length === 0) {
            break; // No more data
        }

        for (const item of data) {
            await new Promise(resolve => setTimeout(resolve, 50));
            yield item;
        }

        pageNumber++;
    }
}

async function processAllItems() {
    const apiEndpoint = 'https://api.example.com/items';
    const allItems = fetchAllItems(apiEndpoint);
    const itemsArray = await allItems.toArray();

    console.log(`Fetched ${itemsArray.length} items.`);
    // Further processing can be performed on the `itemsArray`
}

8. `forEach()`

Pomocnik forEach() wykonuje podaną funkcję raz dla każdej wartości w generatorze asynchronicznym. W przeciwieństwie do innych pomocników, forEach() nie zwraca nowego generatora asynchronicznego; jest używany do wykonywania efektów ubocznych na każdej wartości.

Składnia:

asyncGenerator.forEach(callback)

Przykład: Logowanie każdej liczby ze strumienia do konsoli.

async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  await numbers.forEach(async (num) => {
    await new Promise(resolve => setTimeout(resolve, 100));
    console.log('Number:', num);
  });
}

processNumbers();

Rzeczywisty przypadek użycia: Wysyłanie aktualizacji w czasie rzeczywistym do interfejsu użytkownika w miarę przetwarzania danych ze strumienia.

async function* fetchRealTimeData(dataSource) {
    //Simulate fetching real-time data (e.g. stock prices).
    const dataStream = [
      { timestamp: new Date(), price: 100 },
      { timestamp: new Date(), price: 101 },
      { timestamp: new Date(), price: 102 }
    ];
    for (const dataPoint of dataStream) {
      await new Promise(resolve => setTimeout(resolve, 500));
      yield dataPoint;
    }
}

async function updateUI() {
  const realTimeData = fetchRealTimeData('stock-api');
  await realTimeData.forEach(async (data) => {
    //Simulate updating the UI
    await new Promise(resolve => setTimeout(resolve, 100));
    console.log(`Updating UI with data: ${JSON.stringify(data)}`);
    // Code to actually update UI would go here.
  });
}

Łączenie Async Generator Helpers w złożone potoki danych

Prawdziwa moc Async Generator Helpers wynika z możliwości łączenia ich w celu tworzenia złożonych potoków danych. Pozwala to na wykonywanie wielu transformacji i operacji na strumieniu asynchronicznym w zwięzły i czytelny sposób.

Przykład: Filtrowanie strumienia liczb w celu uwzględnienia tylko liczb parzystych, następnie podniesienie ich do kwadratu i na koniec pobranie pierwszych 3 wyników.

async function* generateNumbers(start) {
  let i = start;
  while (true) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield i++;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1);

  const processedNumbers = numbers
    .filter(async (num) => num % 2 === 0)
    .map(async (num) => num * num)
    .take(3);

  for await (const num of processedNumbers) {
    console.log(num);
  }
}

processNumbers();

Rzeczywisty przypadek użycia: Pobieranie danych użytkowników, filtrowanie ich na podstawie lokalizacji, przekształcanie danych w celu uwzględnienia tylko istotnych pól, a następnie wyświetlanie pierwszych 10 użytkowników na mapie.

async function* fetchUsers() {
  // Simulate fetching users from a database or API
  const users = [
    { id: 1, name: 'John Doe', location: 'New York', email: 'john.doe@example.com' },
    { id: 2, name: 'Jane Smith', location: 'London', email: 'jane.smith@example.com' },
    { id: 3, name: 'Ken Tan', location: 'Singapore', email: 'ken.tan@example.com' },
    { id: 4, name: 'Alice Jones', location: 'New York', email: 'alice.jones@example.com' },
    { id: 5, name: 'Bob Williams', location: 'London', email: 'bob.williams@example.com' },
    { id: 6, name: 'Siti Rahman', location: 'Singapore', email: 'siti.rahman@example.com' },
    { id: 7, name: 'Ahmed Khan', location: 'Dubai', email: 'ahmed.khan@example.com' },
    { id: 8, name: 'Maria Garcia', location: 'Madrid', email: 'maria.garcia@example.com' },
    { id: 9, name: 'Li Wei', location: 'Shanghai', email: 'li.wei@example.com' },
    { id: 10, name: 'Hans Müller', location: 'Berlin', email: 'hans.muller@example.com' },
    { id: 11, name: 'Emily Chen', location: 'Sydney', email: 'emily.chen@example.com' }
  ];

  for (const user of users) {
    await new Promise(resolve => setTimeout(resolve, 50));
    yield user;
  }
}

async function displayUsersOnMap(location, maxUsers) {
  const users = fetchUsers();

  const usersForMap = users
    .filter(async (user) => user.location === location)
    .map(async (user) => ({
      id: user.id,
      name: user.name,
      location: user.location
    }))
    .take(maxUsers);

  console.log(`Displaying up to ${maxUsers} users from ${location} on the map:`);
  for await (const user of usersForMap) {
    console.log(user);
  }
}

// Usage examples:
displayUsersOnMap('New York', 2);
displayUsersOnMap('London', 5);

Polyfille i wsparcie przeglądarek

Wsparcie dla Async Generator Helpers może się różnić w zależności od środowiska JavaScript. Jeśli potrzebujesz wsparcia dla starszych przeglądarek lub środowisk, może być konieczne użycie polyfilli. Polyfill zapewnia brakującą funkcjonalność, implementując ją w JavaScript. Dostępnych jest kilka bibliotek polyfill dla Async Generator Helpers, takich jak core-js.

Przykład z użyciem core-js:

// Import the necessary polyfills
require('core-js/features/async-iterator/map');
require('core-js/features/async-iterator/filter');
// ... import other needed helpers

Obsługa błędów

Podczas pracy z operacjami asynchronicznymi kluczowe jest prawidłowe obsłużenie błędów. W przypadku Async Generator Helpers obsługa błędów może być realizowana za pomocą bloków try...catch wewnątrz funkcji asynchronicznych używanych w pomocnikach.

Przykład: Obsługa błędów podczas pobierania danych w ramach operacji map().

async function* fetchData(urls) {
  for (const url of urls) {
    try {
      const response = await fetch(url);
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const data = await response.json();
      yield data;
    } catch (error) {
      console.error(`Error fetching data from ${url}: ${error}`);
      yield null; // Or handle the error appropriately, e.g., by yielding an error object
    }
  }
}

async function processData() {
  const urls = [
    'https://api.example.com/data1',
    'https://api.example.com/data2',
    'https://api.example.com/data3'
  ];

  const dataStream = fetchData(urls);

  const processedData = dataStream.map(async (data) => {
    if (data === null) {
      return null; // Propagate the error
    }
    // Process the data
    return data;
  });

  for await (const item of processedData) {
    if (item === null) {
      console.log('Skipping item due to error');
      continue;
    }
    console.log('Processed Item:', item);
  }
}

processData();

Dobre praktyki i uwagi

• Leniwa ewaluacja: Pomocnicy generatorów asynchronicznych są ewaluowani leniwie, co oznacza, że przetwarzają dane tylko na żądanie. Może to poprawić wydajność, zwłaszcza w przypadku dużych zbiorów danych.
• Obsługa błędów: Zawsze prawidłowo obsługuj błędy wewnątrz funkcji asynchronicznych używanych w pomocnikach.
• Polyfille: W razie potrzeby używaj polyfilli, aby wspierać starsze przeglądarki lub środowiska.
• Czytelność: Używaj opisowych nazw zmiennych i komentarzy, aby kod był bardziej czytelny i łatwiejszy w utrzymaniu.
• Wydajność: Bądź świadomy implikacji wydajnościowych związanych z łączeniem wielu pomocników. Chociaż leniwość pomaga, nadmierne łączenie może nadal wprowadzać narzut.

Wnioski

JavaScript Async Generator Helpers zapewniają potężny i elegancki sposób tworzenia, transformacji i zarządzania asynchronicznymi strumieniami danych. Wykorzystując te pomocniki, programiści mogą pisać bardziej zwięzły, czytelny i łatwiejszy w utrzymaniu kod do obsługi złożonych operacji asynchronicznych. Zrozumienie podstaw generatorów i iteratorów asynchronicznych, wraz z funkcjonalnościami każdego pomocnika, jest niezbędne do efektywnego wykorzystania tych narzędzi w rzeczywistych aplikacjach. Niezależnie od tego, czy budujesz potoki danych, przetwarzasz dane w czasie rzeczywistym, czy obsługujesz asynchroniczne odpowiedzi API, Async Generator Helpers mogą znacznie uprościć Twój kod i poprawić jego ogólną wydajność.